<template>
	<div class="user-index">
		<a-modal
			v-model:visible="props.visible"
			class="user-modal"
			width="80%"
			@ok="handleOk"
			height="75%"
			:footer="null"
			@cancel="cancel"
		>
			<h3>解除绑定</h3>
			<div class="content">
				<!-- <span class="select-info">当前设备存在多个加密锁，请选择需要挂失的加密锁</span> -->
				<a-descriptions bordered :column="1">
					<a-descriptions-item
						label="加密锁序列号"
						style="position: relative"
					>
						<a-select
							v-model:value="fromData.serial"
							style="width: 100%"
							placeholder="请选择"
							:bordered="false"
							:showArrow="false"
							@change="changeValue"
						>
							<a-select-option
								:value="item"
								v-for="item in sns"
								>{{ item }}</a-select-option
							>
						</a-select>
						<!-- <EditSelect
							ref="serialValue"
							:selectData="sns"
							:value="fromData.serial"
							@changeValue="changeValue"
						/> -->
						<img
							src="../../assets/img/shuaxin.png"
							alt=""
							class="resetBtn"
							@click="getSn"
						/>
					</a-descriptions-item>
					<a-descriptions-item label="申请人">
						<a-input
							v-model:value="fromData.callUserName"
							placeholder="请输入联系人"
							disabled
					/></a-descriptions-item>
					<a-descriptions-item label="联系电话"
						><a-input
							v-model:value="fromData.tel"
							type="number"
							disabled
							placeholder="请输入联系电话"
					/></a-descriptions-item>
					<a-descriptions-item label="短信验证码" v-if="isCode">
						<div class="message">
							<a-input
								v-model:value="fromData.code"
								placeholder="请输入验证码"
							/>
							<span class="btnList">
								<a-button
									type="text"
									@click="noCode"
									style="
										border: none;
										color: #de3f3f !important;
									"
									>无法获取</a-button
								>
								<a-button @click="smsCode">{{
									codeNum != 60
										? '倒计时' + codeNum
										: '发送验证码'
								}}</a-button>
							</span>
						</div>
					</a-descriptions-item>
					<a-descriptions-item label="设备标识">{{
						selectDog.machineId || machineId
					}}</a-descriptions-item>
					<a-descriptions-item label="已绑定设备">{{
						hostname
					}}</a-descriptions-item>
					<a-descriptions-item label="加密锁状态">
						<span
							class="status"
							v-if="
								selectDog &&
								!once &&
								(selectDog.status == 1 || selectDog.status == 3)
							"
							>生效中</span
						>
						<span
							class="status"
							v-if="selectDog && selectDog.status == 2 && !once"
							>不可用</span
						>
						<span v-else></span>
					</a-descriptions-item>
					<a-descriptions-item label="解绑说明">
						<a-textarea
							style="width: 100%"
							v-model:value="fromData.description"
							placeholder="请输入解绑说明,1000个字以内"
							maxlength="1000"
							:rows="4"
						/>
					</a-descriptions-item>
				</a-descriptions>
			</div>
			<div class="footer">
				<div class="left">
					<span class="desc" v-if="selectBaseInfo.serial"
						>当前加密锁剩余解绑次数<b>{{
							unbindcount > 0 ? unbindcount : 0
						}}</b
						>次</span
					>
					<span class="info">解绑成功后当前设备无法使用</span>
				</div>
				<div class="btn-list">
					<a-button @click="cancel">取消</a-button>
					<a-button
						type="primary"
						@click="handleOk"
						:loading="loading"
						:disabled="
							unbindcount <= 0 ||
							noOk.includes(
								(item) => item.serial === fromData.serial
							)
						"
						>确定</a-button
					>
				</div>
			</div>
		</a-modal>
	</div>
</template>

<script setup>
import { ref, defineProps, reactive, onMounted, watch } from 'vue';
import { requestHttp } from '@/api/main.js';
import { message, notification } from 'ant-design-vue';
const props = defineProps(['visible']);
import EditSelect from '@/components/EditSelect.vue';
const serialValue = ref();
const machineId = ref('');
const emits = defineEmits(['update:visible']);
let fromData = reactive({
	serial: null,
	status: '0',
	applyType: 1,
	callUserName: '',
	userType: 1,
	tel: '',
	description: '',
	code: '',
});
let noOk = ref([]); //不可以解绑的数据
let once = ref(true);
let loading = ref(false);

const changeValue = (value) => {
	once.value = false;
	fromData.serial = value;
	// if (sns.value.includes(fromData.serial)) {
	handleChange(fromData.serial);
	// } else {
	// 	return openNotificationWithIcon("设备不存在，请重新输入锁号");
	// 	// reset();1
	// }
};
let isCode = ref(true);
let hostname = ref();
let unbindcount = ref(5);
let selectDog = ref({});
let selectBaseInfo = ref({});
const cancel = () => {
	newSet();
	isCode.value = true;
	once.value = true;
	emits('update:visible', false);
};
const openNotificationWithIcon = (error) => {
	notification['error']({
		message: '错误信息',
		description: error,
	});
};
const noCode = () => {
	isCode.value = false;
};
const handleOk = () => {
	// if (!sns.value.includes(fromData.serial)) {
	// 	return openNotificationWithIcon("设备不存在，请重新输入锁号");
	// }
	if (!fromData.serial) {
		return openNotificationWithIcon(' 设备编码必填');
	}
	if (!fromData.tel) {
		return openNotificationWithIcon(' 联系方式必填');
	}
	if (!fromData.description) {
		return openNotificationWithIcon('请输入解绑说明');
	}
	if (isCode.value && !fromData.code) {
		return openNotificationWithIcon(' 手机验证码必填');
	}
	if (!selectBaseInfo.value.serial) {
		return openNotificationWithIcon('该设备不存在,请联系管理员');
	}
	if (selectBaseInfo.value.status == 2) {
		return openNotificationWithIcon('该设备已经挂失，无法继续使用');
	}
	if (selectDog.value.loss) {
		return openNotificationWithIcon('该设备已经挂失，无法继续使用');
	}
	if (!selectDog.value.machineId) {
		return openNotificationWithIcon('该设备没有绑定,不能提交解绑');
	}
	loading.value = true;
	fromData.extend1 = selectDog.value.bindTime;
	requestHttp('controller.admin.apply', fromData)
		.then((res) => {
			loading.value = false;

			console.log('++++++++++', res);
			if (res.status != 200) {
				openNotificationWithIcon(res.msg);
			} else {
				message.success('提交成功，请等待平台处理');
				setTimeout(() => {
					cancel();
				}, 1000);
			}
		})
		.catch((e) => {
			// debugger;
		});
};
let sns = ref([]);

let getDogInfo = (id) => {
	if (!id) return;
	requestHttp('controller.manager.read', { serial: id }).then((res) => {
		// if (res.status != 200) {
		// 	// openNotificationWithIcon("设备不存在");
		// 	selectDog.value = {};
		// } else {
		// 	selectDog.value = res.data;
		// }
		console.log('selectDog.value', selectDog.value);
	});
};

let getBaseInfo = (id) => {
	if (!id) return;
	requestHttp('controller.admin.getHardwareBySerial', { serial: `${id}` }).then(
		(res) => {
			console.log(' res.data.result', res.data?.result);
			if (res.data?.result) {
				fromData.callUserName = res.data.result.enterprise.callUserName;
				hostname.value = res.data.result.machineName;
				fromData.tel = res.data.result.enterprise.tel;
				selectBaseInfo.value = res.data.result;
				machineId.value = res.data.result.machineId;
				selectDog.value = res.data.result;
			} else {
				fromData.callUserName = '';
				hostname.value = '';
				fromData.tel = '';
				machineId.value = '';
				selectDog.value = {};
			}
			console.log('machineId.value', machineId.value);

			//获取解绑次数
			unbindcount.value =
				res.data.result && res.data.result.attr[id + '11']
					? 5 - res.data.result.attr[id + '11']
					: 5;
		}
	);
};
const codeNum = ref(60);
let clearId = null;
let smsCode = async () => {
	if (codeNum.value != 60) return;
	if (fromData.tel) {
		let res = await requestHttp('controller.admin.smsCode', {
			tel: fromData.tel,
		});
		clearId = setInterval(() => {
			codeNum.value--;
			if (codeNum.value == 0) {
				clearInterval(clearId);
				codeNum.value = 60;
			}
		}, 1000);
	}
};

let handleChange = (e) => {
	getDogInfo(e);
	getBaseInfo(e);
};
const reset = () => {
	unbindcount.value = ref(5);
	// serialValue.value.reset();
	fromData.serial = null;
	fromData.status = '0';
	fromData.callUserName = '';
	fromData.tel = '';
	fromData.description = '';
	fromData.code = '';
	machineId.value = '';
};
const newSet = () => {
	selectDog.value.machineId = '';
	hostname.value = '';
	selectDog.value = {};
	reset();
};
let getSn = () => {
	requestHttp('controller.manager.getSn').then((res) => {
		// fromData.serial = null;
		sns.value = res.data;
		if (!sns.value || sns.value.length === 0) {
			newSet();
		} else if (sns.value.length > 0) {
			!sns.value.includes(fromData.serial) ? newSet() : '';
		}
		console.log('sns.value', sns.value);
	});
};
watch(
	() => props.visible,
	() => {
		if (props.visible) {
			getSn();
			selectDog.value = {};
			fromData = reactive({
				serial: null,
				status: '0',
				applyType: 1,
				callUserName: '',
				tel: '',
				description: '',
				code: '',
			});
		} else {
			selectDog.value = {};
			fromData = reactive({
				serial: null,
				status: '0',
				applyType: 1,
				callUserName: '',
				tel: '',
				description: '',
				code: '',
			});
		}
	}
);
const getNoOKList = () => {
	requestHttp('controller.manager.readAll').then((res) => {
		if (res.data.length > 0) {
			noOk.value = res.data.filter((e) => Number(e.status) !== 1);
		} else {
			noOk.value = [];
		}
	});
};
onMounted(() => {
	getSn();
	getNoOKList();
});
</script>

<style lang="scss" scoped>
h3 {
	font-size: 21px;
	color: #287cfa;
	text-align: center;
}

.message {
	// display: flex;
	// justify-content: space-between;
	position: relative;
	.ant-input {
		// width: 60%;
		text-align: center;
		border: none;
	}
	.btnList {
		position: absolute;
		right: 10px;
	}
	.ant-btn {
		border: 1px solid #6590fc;
		color: #287cfa;
	}
}

:deep(.ant-descriptions-row) {
	height: 44px;
	line-height: 44px;
}

:deep(.ant-descriptions-row .ant-descriptions-item-label) {
	text-align: right;
	padding: 0 24px;
	width: 30%;
}

:deep(.ant-descriptions-row .ant-descriptions-item-content) {
	text-align: center;
	padding: 0 0px;
}

.content {
	height: 300px;
	overflow-y: auto;

	.title {
		display: block;
		font-size: 16px;
		color: #333333;
	}

	.desc {
		display: block;
		font-size: 14px;
		color: #2a2a2a;
	}

	.select-info {
		display: block;
		font-size: 12px;
		color: #606060;
		margin-bottom: 8px;
	}
}

.status {
	color: #15b426;
}
.resetBtn {
	width: 17px;
	height: 17px;
	position: absolute;
	z-index: 100;
	right: 44px;
	top: 12px;
	cursor: pointer;
}
.footer {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 30px;

	.left {
		span {
			font-size: 12px;
			display: block;
		}

		.desc {
			color: #2a2a2a;

			b {
				color: #de3f3f;
			}
		}

		.info {
			font-size: 12px;
			color: #de3f3f;
			margin-top: 5px;
		}
	}

	.btn-list {
		button + button {
			margin-left: 10px;
		}
	}
}
.ant-input {
	width: 100%;
	text-align: center;
	border: none;
	&:focus {
		box-shadow: none !important;
	}
	.ant-input-focused {
		box-shadow: none !important;
	}
}
.ant-select {
	width: 100%;
	text-align: center;
	border: none;
	&:focus {
		box-shadow: none !important;
	}
	.ant-select-focused {
		box-shadow: none !important;
	}
}
</style>
